<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="search-section">
			<view class="search-bar">
				<uni-icons type="search" size="20" color="#95a5a6" class="search-icon"></uni-icons>
				<input style="border: none;" type="text" v-model="searchKeyword" placeholder="搜索课程" class="search-input" />
			</view>
			<view class="filter-btn" @click="showFilter">
				<uni-icons type="bars" size="24" color="#4b7bec"></uni-icons>
			</view>
		</view>

		<!-- 课程分类 -->
		<view class="category-section">
			<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
				<view class="category-list">
					<view v-for="(category, index) in categories" :key="index" class="category-item"
						:class="{ active: currentCategory === category.id }" @click="selectCategory(category.id)">
						<uni-icons :type="category.icon" size="24"
							:color="currentCategory === category.id ? '#fff' : '#4b7bec'"></uni-icons>
						<text>{{ category.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 推荐课程 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">推荐课程</text>
				<text class="view-all" @click="viewAllRecommended">查看全部</text>
			</view>
			<scroll-view scroll-x class="course-scroll" show-scrollbar="false">
				<view class="course-list">
					<view class="course-card" v-for="(course, index) in recommendedCourses" :key="index"
						@click="viewCourseDetail(course)">
						<image :src="course.cover" mode="aspectFill" class="course-image"></image>
						<view class="course-info">
							<text class="course-name">{{ course.name }}</text>
							<view class="course-meta">
								<text class="teacher">{{ course.teacher }}</text>
								<text class="duration">{{ course.duration }}分钟</text>
							</view>
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: course.progress + '%' }"></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 最近学习 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">最近学习</text>
				<text class="view-all" @click="viewAllRecent">查看全部</text>
			</view>
			<view class="recent-list">
				<view class="recent-item" v-for="(record, index) in recentRecords" :key="index"
					@click="viewCourseDetail(record)">
					<image :src="record.cover" mode="aspectFill" class="recent-image"></image>
					<view class="recent-info">
						<text class="recent-name">{{ record.name }}</text>
						<view class="recent-meta">
							<text class="progress-text">已学习 {{ record.progress }}%</text>
							<text class="last-time">{{ record.lastTime }}</text>
						</view>
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: record.progress + '%' }"></view>
						</view> 
					</view>
					<!-- <view class="progress-bar">
						<view class="progress-fill" :style="{ width: record.progress + '%' }"></view>
					</view> -->
					<view class="continue-btn" @click.stop="continueLearning(record)">
						<uni-icons type="videocam" size="20" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 学习资料 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">学习资料</text>
				<text class="view-all" @click="viewAllMaterials">查看全部</text>
			</view>
			<view class="material-list">
				<view class="material-item" v-for="(material, index) in materials" :key="index"
					@click="downloadMaterial(material)">
					<view class="material-icon">
						<uni-icons :type="material.type === 'pdf' ? 'pdf' : 'file'" size="32"
							color="#4b7bec"></uni-icons>
					</view>
					<view class="material-info">
						<text class="material-name">{{ material.name }}</text>
						<text class="material-size">{{ material.size }}</text>
					</view>
					<view class="download-btn">
						<uni-icons type="download" size="20" color="#4b7bec"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				currentCategory: 1,
				categories: [{
						id: 1,
						name: '全部',
						icon: 'grid'
					},
					{
						id: 2,
						name: '临床医学',
						icon: 'heart'
					},
					{
						id: 3,
						name: '基础医学',
						icon: 'info'
					},
					{
						id: 4,
						name: '药学',
						icon: 'star'
					},
					{
						id: 5,
						name: '护理学',
						icon: 'help'
					}
				],
				recommendedCourses: [{
						id: 1,
						name: '人体解剖学基础',
						teacher: '张教授',
						duration: 45,
						progress: 60,
						cover: '/static/courses/anatomy.jpg'
					},
					{
						id: 2,
						name: '临床诊断学',
						teacher: '李教授',
						duration: 60,
						progress: 30,
						cover: '/static/courses/diagnosis.jpg'
					},
					{
						id: 3,
						name: '药理学导论',
						teacher: '王教授',
						duration: 90,
						progress: 0,
						cover: '/static/courses/pharmacology.jpg'
					}
				],
				recentRecords: [{
						id: 1,
						name: '人体解剖学基础',
						progress: 60,
						lastTime: '昨天',
						cover: '/static/courses/anatomy.jpg'
					},
					{
						id: 2,
						name: '临床诊断学',
						progress: 30,
						lastTime: '2天前',
						cover: '/static/courses/diagnosis.jpg'
					}
				],
				materials: [{
						id: 1,
						name: '人体解剖学讲义.pdf',
						size: '2.5MB',
						type: 'pdf'
					},
					{
						id: 2,
						name: '临床诊断学习题集.doc',
						size: '1.8MB',
						type: 'doc'
					}
				]
			}
		},
		methods: {
			showFilter() {
				uni.showToast({
					title: '筛选功能开发中',
					icon: 'none'
				})
			},
			selectCategory(id) {
				this.currentCategory = id
			},
			viewAllRecommended() {
				uni.navigateTo({
					url: '/pages/study/course-list?type=recommended'
				})
			},
			viewAllRecent() {
				uni.navigateTo({
					url: '/pages/study/course-list?type=recent'
				})
			},
			viewAllMaterials() {
				uni.navigateTo({
					url: '/pages/study/materials'
				})
			},
			viewCourseDetail(course) {
				uni.navigateTo({
					url: `/pages/study/course-detail?id=${course.id}`
				})
			},
			continueLearning(record) {
				uni.navigateTo({
					url: `/pages/study/lesson?courseId=${record.id}&autoplay=1`
				})
			},
			downloadMaterial(material) {
				uni.showLoading({
					title: '下载中...'
				})

				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '下载完成',
						icon: 'success'
					})
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		background-color: #f8f9fc;
		min-height: 100vh;
	}

	.search-section {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.search-bar {
			flex: 1;
			height: 80rpx;
			background: #fff;
			border-radius: 40rpx;
			padding: 0 30rpx;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.search-icon {
				margin-right: 20rpx;
			}

			.search-input {
				flex: 1;
				font-size: 28rpx;
				color: #2c3e50;
			}
		}

		.filter-btn {
			width: 80rpx;
			height: 80rpx;
			background: #fff;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}
	}

	.category-section {
		margin-bottom: 30rpx;

		.category-scroll {
			width: 100%;
		}

		.category-list {
			display: flex;
			padding: 10rpx 0;
		}

		.category-item {
			min-width: 160rpx;
			height: 120rpx;
			background: #fff;
			margin-right: 20rpx;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			&.active {
				background: #4b7bec;

				text {
					color: #fff;
				}
			}

			text {
				font-size: 24rpx;
				color: #2c3e50;
				margin-top: 10rpx;
			}
		}
	}

	.section {
		margin-bottom: 40rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #2c3e50;
			}

			.view-all {
				font-size: 26rpx;
				color: #4b7bec;
			}
		}
	}

	.course-scroll {
		width: 100%;
	}

	.course-list {
		display: flex;
		padding: 10rpx 0;
	}

	.course-card {
		width: 300rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-right: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.course-image {
			width: 100%;
			height: 160rpx;
		}

		.course-info {
			padding: 20rpx;

			.course-name {
				font-size: 28rpx;
				font-weight: 500;
				color: #2c3e50;
				margin-bottom: 10rpx;
				display: -webkit-box;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				line-height: 30px;
				height: 60px;
				// display: flex;
				// align-items: end;
			}

			.course-meta {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;

				text {
					font-size: 24rpx;
					color: #7f8c8d;
				}
			}
		}
	}

	.recent-list {
		.recent-item {
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.recent-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
			}

			.recent-info {
				flex: 1;

				.recent-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #2c3e50;
					margin-bottom: 10rpx;
				}

				.recent-meta {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;

					text {
						font-size: 24rpx;
						color: #7f8c8d;
					}
				}
			}

			.continue-btn {
				width: 80rpx;
				height: 80rpx;
				background: #4b7bec;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;
			}
		}
	}

	.progress-bar {
		width: 100%;
		height: 6rpx;
		background: #f0f2f7;
		border-radius: 3rpx;
		overflow: hidden;

		.progress-fill {
			height: 100%;
			background: #4b7bec;
			border-radius: 3rpx;
		}
	}

	.material-list {
		.material-item {
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.material-icon {
				margin-right: 20rpx;
			}

			.material-info {
				flex: 1;

				.material-name {
					font-size: 28rpx;
					color: #2c3e50;
					margin-bottom: 6rpx;
				}

				.material-size {
					font-size: 24rpx;
					color: #7f8c8d;
				}
			}

			.download-btn {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>